<template>
  <div style="margin-top: 16px">
    <a-form-item label="消息实例">
      <div class="message-select">
        <a-select v-model:value="bindMessageId" @change="updateTaskMessage">
          <a-select-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id">
            {{ messageMap[id] }}
          </a-select-option>
        </a-select>
        <a-button size="small" type="primary" @click="openMessageModel">
          <template #icon><plus-outlined /></template>
        </a-button>
      </div>
    </a-form-item>

    <a-modal
      v-model:open="messageModelVisible"
      title="创建新消息"
      width="400px"
      :destroy-on-close="true"
      :mask-closable="false"
      @ok="createNewMessage"
    >
      <a-form :model="newMessageForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" size="small">
        <a-form-item label="消息ID">
          <a-input v-model:value="newMessageForm.id" allow-clear />
        </a-form-item>
        <a-form-item label="消息名称">
          <a-input v-model:value="newMessageForm.name" allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';

  export default {
    name: 'ReceiveTask',
    components: {
      PlusOutlined,
    },
    props: {
      id: String,
      type: String,
    },
    data() {
      return {
        bindMessageId: '',
        newMessageForm: {},
        messageMap: {},
        messageModelVisible: false,
      };
    },
    watch: {
      id: {
        immediate: true,
        handler() {
          this.$nextTick(() => this.getBindMessage());
        },
      },
    },
    created() {
      this.bpmnMessageRefsMap = Object.create(null);
      this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
      this.bpmnRootElements
        .filter((el) => el.$type === 'bpmn:Message')
        .forEach((m) => {
          this.bpmnMessageRefsMap[m.id] = m;
          this.messageMap[m.id] = m.name;
        });
      this.messageMap['-1'] = '无'; // 添加一个空对象，保证可以取消原消息绑定
    },
    methods: {
      getBindMessage() {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || '-1';
      },
      openMessageModel() {
        this.messageModelVisible = true;
        this.newMessageForm = {};
      },
      createNewMessage() {
        if (this.messageMap[this.newMessageForm.id]) {
          message.error('该消息已存在，请修改id后重新保存');
          return;
        }
        const newMessage = window.bpmnInstances.moddle.create('bpmn:Message', this.newMessageForm);
        this.bpmnRootElements.push(newMessage);
        this.messageMap[this.newMessageForm.id] = this.newMessageForm.name;
        this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
        this.messageModelVisible = false;
      },
      updateTaskMessage(messageId) {
        if (messageId === '-1') {
          window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
            messageRef: null,
          });
        } else {
          window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
            messageRef: this.bpmnMessageRefsMap[messageId],
          });
        }
      },
    },
    beforeUnmount() {
      this.bpmnElement = null;
    },
  };
</script>

<style scoped>
  .message-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
  }
</style>
